<template>
  <div>
    <a-layout id="components-layout-demo-top-side-2">
      <a-layout-header class="header">
        <div class="logo">
          <img :src=src alt="Brother - 表情包专业户">
          <span class="title">Brother后台管理平台</span>
          <a-button type="dashed" icon="bank" @click="goHome">首页</a-button>
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider width="200" style="background: #fff">
          <a-menu
              mode="inline"
              :default-selected-keys="['1']"
              :default-open-keys="['表情管理']"
              :style="{ height: '100%', borderRight: 0 }"
          >
            <a-menu-item key="1">
              <router-link to="/emoji">表情管理</router-link>
            </a-menu-item>
            <a-menu-item key="2">
              <router-link to="/tag">标签管理</router-link>
            </a-menu-item>
          </a-menu>
        </a-layout-sider>
          <a-layout-content
              :style="{ background: '#fff',marginLeft:'5px'}"
          >
            <router-view/>
          </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>

export default ({
  name:'Admin',
  data(){
    return{
      src:'https://galidata-1309989133.cos.ap-chengdu.myqcloud.com/brother%2Ftest%2Fimg%2Flogo.png'
    }
  },
  methods:{
    goHome(){
      this.$router.push('/home')
    }
  }
})

</script>

<style scoped>
.logo {
  display: flex;
  align-items: center;
  height: 64px;
}

.logo > img {
  margin-right: 16px;
  height: 80%;
}
.logo button{
  margin-left: 1000px;
}
.title {
  font-size: 18px;
  color: #fff;
  margin-right: 16px;
  letter-spacing: 4px;
}

</style>
